<template>
  <v-page class="bg-light">
    <view
      class="bg-gray-2 d-flex align-center justify-between p-x-sm rounded-sm"
      style="
        width: 616rpx;
        line-height: 50rpx;
        height: 50rpx;
        margin: 28rpx auto;
      "
    >
      <view class="iconfont flex-shrink-0 fn-sm"> &#xe610; </view>
      <view
        class="color-gray-1 fn-12 overflow-hidden"
        style="width: 454rpx; height: 34rpx; line-height: 34rpx"
      >
        维护公告 9月19日至9月20日银行维护
      </view>

      <view class="link fn-12 color-theme"> 详情 </view>
    </view>
    <view class="d-flex align-center justify-center m-y-lg">
      <view class="image w-20 m-x-md">
        <img src="static/img/me/money.png" alt="" class="w-max h-max" />
      </view>
      <view class="fn-22 fn-bold color-default"> 0.00 </view>
    </view>
    <view class="d-flex align-center justify-around m-y-md">
      <view class="fn-16 color-default d-flex flex-col align-center">
        <view class="iconfont" style="color: #f08719; font-size: 100rpx">
          &#xe62c;</view
        >
        <view class="txt"> 充值 </view>
      </view>
      <view class="fn-16 color-default d-flex flex-col align-center">
        <view class="iconfont" style="color: #d11a2d; font-size: 100rpx">
          &#xe67c;</view
        >
        <view class="txt"> 提现 </view>
      </view>
    </view>

    <view class="layout-main m-t-lg">
      <navigator
        v-for="item in datas"
        :key="item"
        :url="item.url"
        class="u-row"
      >
        <view class="bg-light p-md border-b">
          <view
            class="d-flex align-center justify-between h-22"
            style="line-height: 22px"
          >
            <view class="d-flex align-center h-22">
              <view
                class="iconfont fn-20"
                v-html="item.ico"
                :style="`color: ${item.color}`"
              >
              </view>
              <view class="txt fn-16 color-default m-l-lg">{{
                item.name
              }}</view>
            </view>
            <view class="iconfont fn-18 color-tips"> &#xe601; </view>
          </view>
        </view>
      </navigator>
    </view>
  </v-page>
</template>

<script>
export default {
  data() {
    return {
      datas: [
        {
          name: "我的银行卡",
          url: "./bank-card",
          ico: "&#xe622;",
          color: "#1296db",
        },
        {
          name: "我的红包",
          url: ".",
          ico: "&#xe629;",
          color: "#ff4f4f",
        },
        {
          name: "我的账单",
          url: "",
          ico: "&#xe72e;",
          color: "#f08719",
        },
        {
          name: "修改支付密码",
          url: "./collect",
          ico: "&#xe611;",
          color: "#20368a",
        },
        {
          name: "忘记支付密码",
          url: "",
          ico: "&#xe62a;",
          color: "#c61826",
        },
        {
          name: "安全锁",
          url: "",
          ico: "&#xe665;",
          color: "#e04040",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.u-row {
  width: 100%;
}
</style>